<script setup lang="ts">
import CdlTable from "@/components/table";
import {TableTree} from "@/interfaces/components/Table";
import {Menu} from "@/interfaces/views/sys/menu";
import type {Query, Request, State, Mode} from "@/interfaces/components/Page";
import {useTableTemplate} from "@/hooks/TableHooks";
import {reactive, h, ref} from "vue";
import {createPopup} from "@/utils/createPopup";
import CdlForm from "@/components/form/index"
import {FormTree} from "@/interfaces/components/Form";
import {useFormTemplate} from "@/hooks/formHooks";
import {FormData} from "@/interfaces/components/Page";
import MenuList from "@/views/sys/menu/child/menuList.vue"
import IconList from "@/views/sys/menu/child/iconList.vue";
import SvgIcon from "@/components/svg-icon";
import {Action, ElMessageBox} from "element-plus";
import {cloneDeep} from "lodash";

const request:Request = {
  createdIsNeed: true,
  url: "/sys/menu",
  fullUrl: "/sys/menu/treeList"
}
let loading = ref(false)

/**
 * 表格组件模板
 */
const tabTree: TableTree<Menu> = {
  colRule: [
    {ti: "名称", prop: "name", minWidth: 200},
    {ti: "图标", prop: "icon", slot: (scope: any)=>{
        return h(SvgIcon, {
          icon: scope
        })
      }},
    {ti: "类型", prop: "type", dict: "menu_type"},
    {ti: "打开方式", prop: "openStyle", dict: "menu_openWay"},
    {ti: "排序", prop: "sort"},
    {ti: "路由", prop: "url", tooltip: true},
    {ti: "授权标识", prop: "authority"},
  ],
  control:[
    {name: "修改", type: "success", method: openMenuUpdate},
    {name: "删除", type: "danger", prop: "id", method: delMenu},
  ]
}

const state = reactive<State<Query<Menu>, Menu>>({
  queryForm: {},
  dataList: []
})

const formTree: FormTree<Menu> =  [
    [
      {label: "类型", component: "radio", prop: "type", options: [
          {label: "菜单", value: 0},
          {label: "隐藏页面", value: 3},
          {label: "按钮", value: 1},
          {label: "接口", value: 2},
        ], rule: [{
          required: true, message: '类型不能为空', trigger: 'change'
        }], changeMethod: (value, data, enable)=>{
            enable["form-item-icon"] = value === 0 || value === 3
            enable["form-item-url"] = value === 0 || value === 3
            enable["form-item-openStyle"] = value === 0 || value === 3
        }}
    ],
    [
      {label: "名称", component: "input", prop: "name", rule: [{
          required: true, message: '名称不能为空', trigger: 'blur'
        }]},
      {label: "上一级菜单", component: "", prop: "parent",
        slot: (item:any, callFun: any)=>{
          return h(MenuList, {
            data: item,
            callFun: callFun
          })
        }, rule: [{
          required: true, message: '上一级菜单不能为空', trigger: 'blur'
        }]},
    ],
    [
      {label: "路由", component: "input", prop: "url", style: "width: 100%"}
    ],
    [
      {label: "排序", component: "inputNumber", prop: "sort"},
      {label: "打开方式", component: "radio", prop: "openStyle", options: [
          {label: "内部打开", value: 0},
          {label: "外部打开", value: 1},
        ]}
    ],
    [
      {label: "图标", component: "", prop: "icon",
        slot: (item:any, callFun: any)=>{
          return h(IconList, {
            data: item,
            callFun: callFun
          })
        }},
    ],
    [
      {label: "授权标识", component: "input", prop: "authority", placeholder: "多个用逗号分隔",
        style: "width: 100%"},
    ]
]

const popupData: FormData<Menu> = {
  id: "",
  type: 0,
  name: "",
  pid: 0,
  parentName: "",
  url: "",
  sort: 0,
  openStyle: 0,
  authority: "",
  icon: "",
  parent: {
    id: 0,
    name: "一级菜单"
  }
}

// function getMenuList(): Promise<any>{
//   return new Promise((resolve, reject) => {
//     useMenuListApi(0).then(res =>{
//       resolve(res.data)
//     })
//   })
// }

/**
 * 打开菜单新增
 */
function openMenuInsert(){
  createPopup("新增菜单", h(CdlForm, {
    templateTree: formTree,
    model: createPopupDataTemplate(),
  }), "add", popupCallBack)
}

/**
 * 菜单修改
 */
function openMenuUpdate(data: Menu){
  data.parent = {
    id: data.pid,
    name: ""
  }
  const tree = cloneDeep(formTree)
  if(data.type === 1 || data.type === 2){
    tree[2][0].enable = false
    tree[3][1].enable = false
    tree[4][0].enable = false
  }
  createPopup("修改菜单", h(CdlForm, {
    templateTree: tree,
    model: createPopupDataTemplate(data),
  }), "update", popupCallBack)
}
/**
 * 删除
 * @param id
 */
function delMenu(id: string | number){
  ElMessageBox.alert('在您执行删除操作前，请确认已与管理人员沟通并已知晓可能出现的异常情况？' +
      '此操作可能会导致某些页面不显示或按钮出现异常情况！', '警告', {
    confirmButtonText: '确认，我已知晓',
    callback: (action: Action) => {
      if(action === "confirm") del(id)
    }
  })
}
/**
 * 弹出层回调
 * @param data 数据
 * @param mode 模式
 */
function popupCallBack(mode: Mode, data?: any){
  data.parentName = data?.parent.name
  data.pid = data?.parent.id
  delete data.parent
  switch (mode) {
    case "add":
      added(data)
      break
    case "update":
      update(data)
      break
  }
}

const {query, added, update, del} = useTableTemplate(request, state)
const {createPopupDataTemplate} = useFormTemplate(popupData)
</script>

<template>
  <el-card>
    <section class="search">
      <el-button type="primary" @click="openMenuInsert">新增</el-button>
      <el-button type="danger">展开/折叠</el-button>
    </section>
    <cdl-table :data="state.dataList" :template-tree="tabTree"
               row-key="id" :control-width="180" controlFixed :loading="loading"></cdl-table>
  </el-card>
</template>
